<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			input{
				 outline: none;
			}
			.shadow{
				width: 100%;
				height: 100%;
				background: linear-gradient(to right,
				#96e5dc,
				#c7fcdd,
				#d7e5ce);
				opacity: 0.5;
				position: fixed;
				top: 0;
				left: 0;
			}
			.content{
				width: 550px;
				_height: 200px;
				min-height: 200px;
				background: #F0F8FF;
				position: absolute;
				top: 150px;
				left: 0;
				right: 0;
				margin:auto;
				border-radius: 40px;
				/* 阴影兼容 */
				-webkit-box-shadow: 0 0 15px 15px rgba(0, 0, 0, .1);
				-moz-box-shadow: 0 0 15px 15px rgba(0, 0, 0, .1);
				box-shadow: 0 0 15px 15px rgba(0, 0, 0, .1);
				
			}
			.close{
				width: 60px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
				color: black;
				background: rgba(0,0,0,.1);
				position: absolute;
				right: 0;
				top: 0;
				border-radius: 0px 40px 0px 0px;
			}
			.dengluMeans{
				width: 200px;
				margin: auto;
				
			}
			.zhanghaoNum{
				display: none;
			}
			.zhanghaoDl,.phoneDl{
				border: none;
			}
			.zhuceDiv,.dengluDiv{
				width: 450px;
				height: 250px;
				/* background-color: #0000FF; */
				padding-top: 60px;
				margin: 0 auto;
			}
			
			.dengluzhanghao,
			.denglumima,
			.yanzhengmaInput{
				width: 430px;
				height: 30px;
				border-radius: 15px;
				margin: 15px 10px;
				padding: 0 5px;
				/* background-color: #99ffbb; */
			}
			.zhucemingo,
			.zhucemima,
			.querenmima{
				width: 430px;
				height: 30px;
				border-radius: 15px;
				margin: 10px 10px;
				padding: 0 5px;
			}
			.phone{
				width: 300px;
				height: 30px;
				border-radius: 15px;
				margin: 10px 3px 10px 10px;
				padding: 0 5px;
				/* display:inline-block; */
			}	
			.yanzhengma{
				width: 110px;
				height: 35px;
				border-radius: 15px;
				/* margin: 15px 5px 15px 3px; */
				
				background:  linear-gradient(to right,
				#a8e1cb,
				#a9ce90,
				#c8f0cd);
				/* display:inline-block; */
			}
			.dengluBtn,
			.zhuceBtn{
				width: 430px;
				height: 35px;
				border-radius: 15px;
				margin: 15px 15px;
				background:  linear-gradient(to right,
				#00984c,
				#89ce44,
				#7df085);
			}
			.changeZc,
			.changeDl{
				font-size: 14px;
				line-height: 60px;
				color: #565656;
				float: right;
			}
			.zhuceDiv{
				display: none;
			}
			button:hover{
				cursor: pointer;
			}
			.tips{
				font-size: 14px;color: red;padding-left: 10px;display: none;
			}
		</style>
	</head>
	<body>
	
		<div class="shadow">
			<div class="content">
				<div class="close"><span>X</span></div>
				<div class="dengluDiv">
					<div class="dengluMeans">
						<button class="zhanghaoDl">账号登陆</button> &nbsp; &nbsp;|  &nbsp;&nbsp;
						<button  class="phoneDl">手机号登录</button>
					</div> 
					<div class="zhanghaoNum">
						<input class="dengluzhanghao" type="text" placeholder="请输入账号"/>
						<input class="denglumima" type="password" placeholder="请输入您的密码"/>
						<span  class="accountlogin-tips tips">请输入正确的账号或者密码</span>
						<input class="zhanghao-dengluBtn dengluBtn" type="button" value="登录"/>
					</div>
					<div class="phoneNum">
						<input class="phone" type="text" placeholder="请输入你的手机号" />
						<input class="yanzhengma" type="button" value="点击发送验证码"/>
						<input class="yanzhengmaInput" type="text" placeholder="填写验证码"/>
						<span class="phonelogin-tips tips">请填写正确的验证码</span>
						<input class="phone-dengluBtn dengluBtn" type="button" value="登录"/>
					</div>
					
					<span class="changeZc">
						立即注册
					</span>
				</div>
				<div class="zhuceDiv">
					<input class="zhucemingo" type="text" placeholder="用户名"/>
					<input class="phone" type="text" placeholder="请输入手机号"/>
					<input class="yanzhengma" type="button" value="点击发送验证码"/>
					<input class="zhucemima" type="password" placeholder="请设置您的密码"/>
					<input class="querenmima" type="password" placeholder="请确认您的密码"/>
					<span class="register-tips tips">请检查资料是否填写完整或正确</span>
					<input class="zhuceBtn" type="button" value="注册"/>
					<span class="changeDl">
						立即登录
					</span>
				</div>
			</div>
		</div>
	</body>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/jquery.cookie.js"></script>
	<script>
		$(function(){
			// 样式js
			$(".close").click(function(){
				
				$(".shadow").css("display","none");
			})
			$(".changeZc").click(function(){
				$(".dengluDiv").css("display","none");
				$(".zhuceDiv").css("display","block");
			})
			$(".changeDl").click(function(){
				$(".zhuceDiv").css("display","none");
				$(".dengluDiv").css("display","block");
				
			})
			$(".zhanghaoDl").click(function(){
				$(".phoneNum").css("display","none");
				$(".zhanghaoNum").css("display","block");
			})
			$(".phoneDl").click(function(){
				$(".zhanghaoNum").css("display","none");
				$(".phoneNum").css("display","block");
				
			})
			// 判断账号登录是否填写完整正确发送请求
				$(".zhanghao-dengluBtn").click(function(){
					if($(".dengluzhanghao").val()=="" || $(".denglumima").val()==""){
						$(".accountlogin-tips").css("display","block");
					}
					else{
						$.ajax({
						          //请求方式
						          type : "post",
						         
						          //请求地址
						          url : "http://localhost:3030/searchUser",
						          
						          data :{password:$(".denglumima").val(),account:parseInt($(".dengluzhanghao").val())},
						          //请求成功
						          success : function(result) {
						              console.log(result)
										 if(result.info=="登录成功"){
											 $(".accountlogin-tips").css("display","none")
											 $(".shadow").css("display","none")
											 $.cookie("account",result.res[0].account);
											 $.cookie("username",result.res[0].username);
											 $.cookie("password",result.res[0].password);
											 $.cookie("faceimgpath",result.res[0].faceimgpath);
											 $.cookie("contents",result.res[0].remarks.contents);
											 console.log($.cookie("username"))
											 alert("登陆成功")
										 }
										 else{
											 $(".accountlogin-tips").css("display","block");
											
										 }
									  
						          },
						          //请求失败，包含具体的错误信息
						          error : function(e){
						             alert("登陆失败")
						          }
						      });
						
					}
				})
			
			
			//注册新用户请求	
				$(".zhuceBtn").click(function(){
					if($(".zhucemingo").val()=="" || $(".zhucemima").val()=="" || $(".querenmima").val()==""){
						$(".register-tips").css("display","block");
					}
					else{
						if($(".zhucemima").val() != $(".querenmima").val()){
							$(".register-tips").css("display","block");
						}else{
							$(".register-tips").css("display","none");
							
							$.ajax({
							          //请求方式
							          type : "post",
							         
							          //请求地址
							          url : "http://localhost:3030/registerUser",
							          
							          data :{password:$(".zhucemima").val(),username:$(".zhucemingo").val()},
							          //请求成功
							          success : function(result) {
											 
							             if(result.info=="注册成功"){
											 
											 alert("注册成功请牢记您的登录账号:"+result.account)
											 alert("三秒后跳转到登陆页面")
											 setTimeout(function(){
												 $(".zhucemingo").val("");
												 $(".zhucemima").val("");
												 $(".querenmima").val("");
												 $(".zhuceDiv").css("display","none");
												 $(".dengluDiv").css("display","block");
											 },3000)
										 }
										  
							          },
							          //请求失败，包含具体的错误信息
							          error : function(e){
							             alert("注册失败")
							          }
							      });
							
							
							
							
							
						}
					}
				})
		
		
		// 结束括号
		})
	</script>
</html>
